/*
 * 总测肤统计折线图
 * @Author: ljb
 * @Date: 2018-08-13 17:09:33
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-09-20 15:27:17
 */
<style  lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-component-all-skin-test-chart {
		width: 100%;
		// min-width: 750px;
		height: 350px;
		overflow: hidden;
    }

</style>
<template>
	<div
		id="skin_chart"
		class="v-component-all-skin-test-chart"/>
</template>

<script>
import echarts from 'echarts';

export default {
	name: 'VisitLineChart',
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		skinStatistics: {
			type: Array,
			default() {
				return [];
			},
		},
		dataType: {
			type: String,
			default() {
				return 'month';
			},
		},
		type: {	// 店铺(store)或设备(device)
			type: String,
			required: true,
		},
	},
	data() {
		return {
			line_chart: null,
			type_title: '',
			chart_option_map: {
				store: {
					grid: {
						left: '20',
						right: '40',
						top: '10%',
						bottom: '8%',
						containLabel: true,
					},
				},
				device: {
					grid: {
						left: '20',
						right: '20',
						top: '10%',
						bottom: '8%',
						containLabel: true,
					},
				},
			},
		};
	},
	watch: {
		skinStatistics: {
			handler() {
				this.dispatchAccrodingToType();
			},
			deep: true,
		},
		loading() {
			if (this.loading) {
				this.line_chart.showLoading({
					color: '#37a2ca',
				});
			} else {
				this.line_chart.hideLoading();
			}
		},
	},
	mounted() {
		this.line_chart = echarts.init(document.getElementById('skin_chart'));
		this.dispatchAccrodingToType();
	},
	methods: {
		/**
         * 初始化折线图
		 * @param  {Array} legend_data {图例名称}
		 * @param  {Object} grid        {位置配置}
		 * @param  {Object} xAxis       {x轴的配置参数}
		 * @param  {Object} yAxis       {y轴的配置参数}
		 * @param  {Array} series      {数据参数}
		 * @param  {Number} dataZoom    {x轴显示数量控制}
		 * @return {undefined}
		 */
		initChart({
			legend_data, grid, xAxis, yAxis, series, dataZoom,
		}) {
			this.line_chart.clear();

			const option = {
				tooltip: {
					trigger: 'axis',
					backgroundColor: '#80b2eb',
					axisPointer: {
						type: 'cross',
					},
				},
				legend: {
					show: false,
					data: legend_data,
					x: 'center',
				},
				axisPointer: {
					snap: true,
					lineStyle: {
						color: '#ccc',
					},
					// @see {@link http://echarts.baidu.com/option.html#axisPointer.label.precision}
					label: {
						precision: 0,
					},
				},
				dataZoom: [
					{ // 这个dataZoom组件，也控制x轴。
						type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
						realtime: true,
						start: 100 - dataZoom,
						end: 100,
						zoomLock: true,
					},
				],
				grid,
				xAxis,
				yAxis,
				series: [
					{
						name: `${this.type_title + this.$t('home.test_number')}`,
						type: 'line',
						itemStyle: {
							color: '#37a2ca',
						},
						data: series,
					},
				],
			};

			this.line_chart.setOption(option);
		},
		/**
         * 根据dataType执行对应的方法
         * @return {undefined}
         */
		dispatchAccrodingToType() {
			switch (this.dataType) {
			case 'year':
				this.type_title = this.$t('home.year');

				break;

			case 'month':

				this.type_title = this.$t('home.month');

				break;

			case 'week':

				this.type_title = this.$t('home.weeks');

				break;

			default:
				this.type_title = this.$t('home.day');

				break;
			}

			return this.formatData();
		},

		/**
         * 格式化数据的主方法
         * @return {undefined}
         */
		formatData() {
			const chart_option = {
				legend_data: [`${this.type_title + this.$t('home.test_number')}`],
				grid: this.chart_option_map[this.type].grid,
				xAxis: {
					boundaryGap: true,
					nameLocation: 'center',
					axisTick: {
						alignWithLabel: true,
					},
					axisLabel: {
						interval: 0,
						color: '#333',
					},
					data: [],
				},
				yAxis: {
					name: `${this.type_title + this.$t('home.test_number')}`,
					type: 'value',
				},
				series: [],
				dataZoom: 5,
			};

			const device_width = document.querySelector('.v-component-all-skin-test-chart').offsetWidth;

			const data_length = this.skinStatistics.length;

			const max_dataZoom = (parseFloat((device_width / 120).toFixed(2)) * 100) / data_length;

			chart_option.dataZoom = max_dataZoom;

			this.skinStatistics.forEach((visit) => {
				this[`${this.dataType}Data`](chart_option, visit);
			});

			this.initChart(chart_option);
		},

		/**
         * 年筛选数据格式化
         * @param  {Object} chart_option {图标实例化的选项}
         * @param  {Object} visit        {访客的数据对象}
         * @return {undefined}
         */
		yearData(chart_option, visit) {
			const counts = visit.count;
			const x = visit.year;

			chart_option.xAxis.data.push(x);
			chart_option.series.push(counts);
		},

		/**
         * 月筛选数据格式化
         * @param  {Object} chart_option {图标实例化的选项}
         * @param  {Object} visit        {访客的数据对象}
         * @return {undefined}
         */
		monthData(chart_option, visit) {
			const counts = visit.count;
			const x = `${visit.year}-${this.numberHandle(visit.month)}`;

			chart_option.xAxis.data.push(x);
			chart_option.series.push(counts);
		},

		/**
         * 周筛选数据格式化
         * @param  {Object} chart_option {图标实例化的选项}
         * @param  {Object} visit        {访客的数据对象}
         * @return {undefined}
         */
		weekData(chart_option, visit) {
			const counts = visit.count;
			const x = `${visit.year}-${visit.week}${this.$t('home.weeks')}`;

			chart_option.xAxis.data.push(x);
			chart_option.series.push(counts);
		},

		/**
         * 日筛选数据格式化
         * @param  {Object} chart_option {图标实例化的选项}
         * @param  {Object} visit        {访客的数据对象}
         * @return {undefined}
         */
		dayData(chart_option, visit) {
			const counts = visit.count;
			const x = `${visit.year}-${this.numberHandle(visit.month)}-${this.numberHandle(visit.day)}`;

			chart_option.xAxis.data.push(x);

			chart_option.series.push(counts);
		},

		/**
         * 时间格式的数字处理
         * @param  {Number} num {传入的数字}
         * @return {Number} {处理完的数字}
         */
		numberHandle(num) {
			if (Number(num) < 10) return `0${num}`;
			return num;
		},
	},
};
</script>
